// -------------------饼图
function pieChart(data) {
    let myChart = echarts.init(document.querySelector('.pie'));
      let option = {
        tooltip: {
            // {a} 表示series中的name
            // {b} 表示数据中的series.data中的name
            // {c} 表示每一项的值
            // {d} 表示百分比
            formatter: '{a} <br />{b} <strong>{c}</strong>人 占比{d}%'
          },
          title: {
            text: '籍贯 Hometown',
            textStyle: {
              color: '#6d767e' // 标题演示
            },
          },
          series: [
            {
              name: '各地学员分布',
              type: 'pie', // pie 表示饼图
              radius: ['15%', '65%'], // 内外圈的半径
              center: ['50%', '50%'], // 中心点
              roseType: 'area', // area表示面积模式，radius表示半径模式
              itemStyle: { // 每一项的设置
                borderRadius: 4, // 扇形边缘圆角设置
              },
              data: data
            }
          ]

      };
      myChart.setOption(option);
  }

// pieChart();


//  折线图
function lineChart(lineName, salary, truesalary) {
  let myChart = echarts.init(document.querySelector('.line'));
  let option = {
    // 图例
    legend: {
      top: 20,
    },
    // 鼠标移入的提示
    tooltip: {
      trigger: 'axis', // 轴触发
      position: function (pt) {
        // pt是一个数组，pt[0]表示横坐标位置，'10%'表示Y轴方向始终保持距离顶部10%的距离
        // 所以意思是，提示框的位置会跟随鼠标左右移动，但纵向上的位置始终保持不变。
        return [pt[0], '10%']; 
      }
    },
    // 标题
    title: {
      text: '薪资 Salary',
      textStyle: {
        color: '#6d767e'
      }
    },
    xAxis: {
      type: 'category',
      boundaryGap: false, // x轴两边的留白策略，false表示不留空白
      data: lineName,
    },
    yAxis: {
      type: 'value',
      // Y轴类型为value，则留白策略指的是对数据的延伸。
      // 比如，图表中的数据最大值是17000，则Y轴最大数字大约是 17000 + 17000 * 50%
      boundaryGap: [0, '50%'],
    },
    // 数据缩放组件
    dataZoom: [
      // {
      //   type: 'inside', // 将拖动的条内置到轴里面，看不见了，但是可以拖动
      //   start: 0,
      //   end: 10
      // },
      {
        type: 'slider', // 拖动条显示到轴的外面（默认就是slider类型）
        start: 0, // 拖动滑块起始位置（这是一个百分比）
        end: 15 // 拖动滑块结束位置（这是一个百分比）
      }
    ],
    // 数据部分
    series: [
      {
        name: '期望薪资',
        type: 'line',
        smooth: true, // 表示使用平滑曲线
        symbol: 'none', // 线上拐点位置的样式，none表示没有；也可以是实心圆、空心圆、方块.....
        itemStyle: { // 单独控制这条线的颜色
          color: '#ee6666'
        },
        data: salary,
      },
      {
        name: '实际薪资',
        type: 'line',
        smooth: true,
        symbol: 'none',
        itemStyle: { // 单独控制这条线的颜色
          color: '#5470c6'
        },
        data: truesalary,
      }
    ]
  };
  myChart.setOption(option);
}
// lineChart();

//  柱状图
function barChart({avgScore, group, gt60, gt80, lt60}){
let myChart = echarts.init(document.querySelector('.barChart'));
let option = {
  // 网格（整个图表区域设置）
  grid: {
    top: 30,
    bottom: 30,
    left: '7%',
    right: '7%'
  },
  // 鼠标移入的提示
  tooltip: {
    trigger: 'axis', // 触发方式，axis表示轴触发，item表示每一项
    axisPointer: {   // 坐标轴指示器配置项
      // 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
      type: 'cross', 
      crossStyle: {
        color: '#999'
      }
    }
  },
  // 图例
  legend: {},
  // X轴
  xAxis: [
    {
      type: 'category',
      data: group,
      axisPointer: { // 坐标轴指示器为阴影，配合tooltip中的设置，组成十字准星
        type: 'shadow'
      }
    }
  ],
  // Y轴
  yAxis: [
    {
      type: 'value',
      min: 0, // y轴数据最小值
      max: 100, // y轴数据最大值
      interval: 10, // step步长，把y轴的数据分成多少份
      axisLabel: { // Y轴文字设置
        formatter: '{value}分', // Y轴文字
      }
    },
    {
      type: 'value',
      min: 0,
      max: 10,
      interval: 1,
      axisLabel: {
        formatter: '{value}人'
      }
    }
  ],
  // 数据部分（4组数据）
  series: [
    {
      name: '平均分',
      type: 'bar',
      data: avgScore,
      barWidth: '15',
    },
    {
      name: '低于60分人数',
      type: 'bar',
      data: lt60,
      barWidth: '15',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
    },
    {
      name: '60到80分之间',
      type: 'bar',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      barWidth: '15',
      data: gt60
    }
    ,
    {
      name: '高于80分人数',
      type: 'bar',
      yAxisIndex: 1, // Y轴索引，1表示使用第2个Y轴
      barWidth: '15',
      data: gt80
    }
  ]
};
myChart.setOption(option);
};

// barChart()

// 地图
function mapChart(chinaGeoCoordMap, chinaDatas){
  let myChart = echarts.init(document.querySelector('.map'));
  // var chinaGeoCoordMap = {
  //   黑龙江: [127.9688, 45.368],
  //   内蒙古: [110.3467, 41.4899],
  //   吉林: [125.8154, 44.2584],
  //   北京市: [116.4551, 40.2539],
  //   辽宁: [123.1238, 42.1216],
  //   河北: [114.4995, 38.1006],
  //   天津: [117.4219, 39.4189],
  //   山西: [112.3352, 37.9413],
  //   陕西: [109.1162, 34.2004],
  //   甘肃: [103.5901, 36.3043],
  //   宁夏: [106.3586, 38.1775],
  //   青海: [101.4038, 36.8207],
  //   新疆: [87.9236, 43.5883],
  //   西藏: [91.11, 29.97],
  //   四川: [103.9526, 30.7617],
  //   重庆: [108.384366, 30.439702],
  //   山东: [117.1582, 36.8701],
  //   河南: [113.4668, 34.6234],
  //   江苏: [118.8062, 31.9208],
  //   安徽: [117.29, 32.0581],
  //   湖北: [114.3896, 30.6628],
  //   浙江: [119.5313, 29.8773],
  //   福建: [119.4543, 25.9222],
  //   江西: [116.0046, 28.6633],
  //   湖南: [113.0823, 28.2568],
  //   贵州: [106.6992, 26.7682],
  //   云南: [102.9199, 25.4663],
  //   广东: [113.12244, 23.009505],
  //   广西: [108.479, 23.1152],
  //   海南: [110.3893, 19.8516],
  //   上海: [121.4648, 31.2891],
  //  };
  //  var chinaDatas = [
  //   [
  //    {
  //     name: '黑龙江',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '内蒙古',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '吉林',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '辽宁',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '河北',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '天津',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '山西',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '陕西',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '甘肃',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '宁夏',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '青海',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '新疆',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '西藏',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '四川',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '重庆',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '山东',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '河南',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '江苏',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '安徽',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '湖北',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '浙江',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '福建',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '江西',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '湖南',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '贵州',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '广西',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '海南',
  //     value: 0,
  //    },
  //   ],
  //   [
  //    {
  //     name: '上海',
  //     value: 1,
  //    },
  //   ],
  //  ];
   
   var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
     var dataItem = data[i];
     var fromCoord = chinaGeoCoordMap[dataItem[0].name];
     var toCoord = [116.4551, 40.2539];
     if (fromCoord && toCoord) {
      res.push([
       {
        coord: fromCoord,
        value: dataItem[0].value,
       },
       {
        coord: toCoord,
       },
      ]);
     }
    }
    return res;
   };
   var series = [];
   [['北京市', chinaDatas]].forEach(function (item, i) {
    // console.log(item);
    series.push(
     {
      type: 'lines',
      zlevel: 2,
      effect: {
       show: true,
       period: 4, //箭头指向速度，值越小速度越快
       trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
       symbol: 'arrow', //箭头图标
       symbolSize: 10, //图标大小
       color: 'pink'  //线上箭头颜色
      },
      lineStyle: {
       normal: {
        width: 1, //尾迹线条宽度
        opacity: 1, //尾迹线条透明度
        curveness: 0.3, //尾迹线条曲直度
       },
      },
      data: convertData(item[1]),
     },
     {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
       //涟漪特效
       period: 4, //动画时间，值越小速度越快
       brushType: 'stroke', //波纹绘制方式 stroke, fill
       scale: 4, //波纹圆环最大限制，值越大波纹越大
      },
      label: {
       normal: {
        show: true,
        position: 'right', //显示位置
        offset: [5, 0], //偏移设置
        formatter: function (params) {
         //圆环显示文字
         return params.data.name;
        },
        fontSize: 13,
       },
       emphasis: {
        show: true,
       },
      },
      symbol: 'circle',
      symbolSize: function (val) {
       return 5 + val[2] * 5; //圆环大小
      },
      itemStyle: {
       normal: {
        show: false,
        color: '#f00',
       },
      },
      data: item[1].map(function (dataItem) {
       return {
        name: dataItem[0].name,
        value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value]),
       };
      }),
     },
     //被攻击点
     {
      type: 'scatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
       period: 4,
       brushType: 'stroke',
       scale: 4,
      },
      label: {
       normal: {
        show: true,
        position: 'right',
        //offset:[5, 0],
        color: '#0f0',
        formatter: '{b}',
        textStyle: {
         color: '#0f0',
        },
       },
       emphasis: {
        show: true,
        color: '#f60',
       },
      },
      symbol: 'pin',
      symbolSize: 50,
      data: [
       {
        name: item[0],
        value: chinaGeoCoordMap[item[0]].concat([10]),
       },
      ],
     }
    );
   });
   
   let option = {
     title: {
     text: '来京路线 From',
     textStyle: {
       color: '#6d767e'
     }
     },
    tooltip: {
     trigger: 'item',
     backgroundColor: 'rgba(166, 200, 76, 0.82)',
     borderColor: '#FFFFCC',
     showDelay: 0,
     hideDelay: 0,
     enterable: true,
     transitionDuration: 0,
     extraCssText: 'z-index:100',
     formatter: function (params, ticket, callback) {
      //根据业务自己拓展要显示的内容
      var res = '';
      var name = params.name;
      var value = params.value[params.seriesIndex + 1];
      res = "<span style='color:#fff;'>" + name + '</span><br/>数据：' + value;
      return res;
     },
    },
    backgroundColor: '#fff',
    visualMap: {
     //图例值控制
     min: 0,
     max: 1,
     calculable: true,
     show: false,
     color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
     textStyle: {
      color: '#fff',
     },
    },
    geo: {
     map: 'china',
     zoom: 1.2,
     label: {
      emphasis: {
       show: false,
      },
     },
     roam: true, //是否允许缩放
     itemStyle: {
      normal: {
       color: '#dfe5f2', //地图背景色
       borderColor: '#516a89', //省市边界线00fcff 516a89
       borderWidth: 1,
      },
      emphasis: {
       color: 'rgba(37, 43, 61, .5)', //悬浮背景
      },
     },
    },
    series: series,
   };
   
  myChart.setOption(option)
}
// mapChart();

// =================================
// 发送请求获取班级数据
axios.get('/student/overview').then(({data: res}) => {

  if(res.code === 0){
  $('.total').text(res.data.total);
  $('.avgSalary').text(res.data.avgSalary);
  $('.avgAge').text(res.data.avgAge);
  $('.proportion').text(res.data.proportion);
  }
})


// 柱状图
$('.bar .btn').on('click',function(){

  $(this).next().toggle()
})

// 图表获取列表
$('#batch > li').on('click', function(){
  // alert('我被点了')
  let index = $(this).index();
  let batch = index + 1;

  axios.get('/score/batch',{params: { batch }}).then(({data: res}) => {
    // console.log(res);
  if(res.code === 0){
    barChart(res.data);
  }
  })

})

// $('#batch > li').eq(0).trigger('click');

// 获取学员全部信息
axios.get('/score/list').then(({data: res}) => {
  let {code,data} = res;
  if(code === 0){
    // console.log(data);
    $('#batch > li').eq(0).trigger('click'); // trigger是jQuery方法，专门用于触发元素的事件



    // 3. 获取全部学员信息（从中提取 折线图所需数据、饼图所需数据、地图所需数据）
    axios.get('/student/list').then(({ data: res }) => {
      let { code, data } = res;
      if (code === 0) {
        // 整理出 折线图所需数据、饼图所需数据、地图所需数据
        // console.log(data);
        let lineName = [];
        let salary = [];
        let truesalary = [];
    
        // 饼图所需数据
        let pie = [];  // [{name: '河北省', value: 3}, {name: '内蒙古', value: 1}, {name: '山东省', value: 2}, {name: '辽宁省', value: 1}]
    
        // 地图所需数据
        let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] };
        let chinaDatas = [];
    
        data.forEach(item => {
          // ---------- 处理折线图所需数据------------------
          lineName.push(item.name);
          salary.push(item.salary);
          truesalary.push(item.truesalary);
    
          // ----------- 处理饼图所需数据 ------------------
          let i = pie.findIndex(v => v.name === item.province);
          if (i > -1) {
            pie[i].value += 1;
          } else {
            pie.push({ name: item.province, value: 1 });
          }
    
          // ------------ 处理地图所需数据 ----------------
          chinaGeoCoordMap[item.province] = [item.jing, item.wei];
          // chinaDatas.push([{ name: item.province, value: 0 }])
          let k = chinaDatas.findIndex(v => v[0].name === item.province);
          if (k > -1) {
            chinaDatas[k][0].value += 1;
          } else {
            chinaDatas.push([{ name: item.province, value: 1 }])
          }
        });
    
        // 调用 lineChart、pieChart、mapChart，传入数据
        lineChart(lineName, salary, truesalary);
        pieChart(pie);
        mapChart(chinaGeoCoordMap, chinaDatas);
      }
    });

  }
})